<template>
  <div class="my-box">
      <div>Data操作：</div><div>{{name}} -- {{sex}}</div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, toRefs } from 'vue'

  //  // ref声明响应式数据，用于声明基本数据类型
  // const name = ref('Jerry')
  // const sex = ref('男')
  // // 修改
  // name.value = 'Lisa'
  // sex.value='女'


  // reactive声明响应式数据，用于声明引用数据类型
  const state = reactive({
    name: 'Jerry',
    sex: '男'
  })
  // 修改
  state.name = 'Tom'
  
  // 使用toRefs解构
  const {name, sex} = toRefs(state)
  // template可直接使用{{name}}、{{sex}}
</script>

<style scoped>
.my-box{
    display: flex;
}
  /* 支持CSS变量注入v-bind(color) */
</style>
